<template>
  <div class="button-demo">
    <h2>Ant Design Vue 按钮组件演示</h2>
    
    <div class="demo-section">
      <h3>基础按钮</h3>
      <div class="button-group">
        <AntButton type="default">默认按钮</AntButton>
        <AntButton type="primary">主要按钮</AntButton>
        <AntButton type="dashed">虚线按钮</AntButton>
        <AntButton type="link">链接按钮</AntButton>
        <AntButton type="text">文本按钮</AntButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>自定义类型按钮</h3>
      <div class="button-group">
        <AntButton type="success">成功按钮</AntButton>
        <AntButton type="warning">警告按钮</AntButton>
        <AntButton type="danger">危险按钮</AntButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>不同尺寸</h3>
      <div class="button-group">
        <AntButton size="small">小按钮</AntButton>
        <AntButton size="middle">中等按钮</AntButton>
        <AntButton size="large">大按钮</AntButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>状态按钮</h3>
      <div class="button-group">
        <AntButton :loading="loading" @click="handleLoading">
          {{ loading ? '加载中...' : '点击加载' }}
        </AntButton>
        <AntButton disabled>禁用按钮</AntButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>特殊样式</h3>
      <div class="button-group">
        <AntButton block>块级按钮</AntButton>
        <AntButton circle>
          <template #icon>
            <span>+</span>
          </template>
        </AntButton>
      </div>
    </div>

    <div class="demo-section">
      <h3>带图标的按钮</h3>
      <div class="button-group">
        <AntButton type="primary">
          <template #icon>
            <span>🚀</span>
          </template>
          发射
        </AntButton>
        <AntButton type="success">
          <template #icon>
            <span>✅</span>
          </template>
          确认
        </AntButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AntButton } from '@vue-monorepo/ui'

// 响应式数据
const loading = ref(false)

// 处理加载按钮点击
const handleLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<style scoped>
.button-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-section h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 16px;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.button-group .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}

h2 {
  text-align: center;
  color: #1890ff;
  margin-bottom: 30px;
}
</style>
